import {FlatList, StyleSheet, TouchableOpacity} from "react-native";
import {useLayoutEffect} from "react";
import {Icon, Text} from "react-native-paper";

interface props {
    feedback?: Array<{
        user_name: string,
        star_count: number,
        text: string
    }>
}

export const FeedbackList = ({feedback}: props) => {

    useLayoutEffect(() => {

    }, [feedback]);

    const renderItem = (item: { user_name: string, star_count: number, text: string }) => {
        return <TouchableOpacity onPress={() => console.log(1)}
                                 style={{
                                     flexDirection: "column",
                                     backgroundColor: "#EDEDED",
                                     maxWidth: 240,
                                     paddingVertical: 8,
                                     paddingHorizontal: 10,
                                     borderRadius: 8
                                 }}>
            <Text children={item.user_name}
                  style={{
                      fontSize: 15,
                      fontWeight: '700',
                  }}/>
            <TouchableOpacity
                children={[...Array(item.star_count).keys()].map((item: number, index: number) => <Icon size={14}
                                                                                                        key={index}
                                                                                                        color={`#ffd314`}
                                                                                                        source={`star`}/>)}
                style={{
                    flexDirection: "row"
                }}/>
            <Text children={item.text}
                  style={{
                      fontSize: 13,
                      fontWeight: '600'
                  }}/>
        </TouchableOpacity>
    }

    return (
        <FlatList data={feedback}
                  contentContainerStyle={style.container}
                  nestedScrollEnabled
                  horizontal={true}
                  showsHorizontalScrollIndicator={false}
                  renderItem={item => renderItem(item.item)}/>
    );
};

const style = StyleSheet.create({
    container: {
        paddingVertical: 12,
        gap: 10
    }
});